﻿<div class="easyui-layout" id="Layout_on_gian_do_gpon" style="position:relative;">
   
    <div style="position: absolute;top: 3px;right: 20px; z-index:999">
         <button type="button" onclick="return PrintAreaDiv('LoadGianDoGPOn');" style="padding:1px 0" >
             <span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">In Giản Đồ</span><span class="l-btn-icon icon-print">&nbsp;</span></span>
        </button>
   </div>
    <div id="pannel_list_cau_truc_dn_find_site_gian_do" data-options="region:'west', collapsible:false" title="Site Viễn Thông" style="width: 300px; padding: 10px">
        
        <input value="" id="donvi_find_gian_do_ontgpon" style="width:270px; height:27px" />

         <div id="TreeGird_dau_noi_tb_gian_do_ont_gpon"></div>

    </div>
    <div id="pannel_list_ont_gian_do_gpon" data-options="region:'center'" style="padding:5px; position:relative" title="Giản đồ ONT - GPON">
        
        <div id="LoadGianDoGPOn">

            <div id="ContentGianDo">
                <h3 class="h3_infor_gian_do">

                    Chọn thiết bị bên trái màn hình để hiển thị giản đồ

                </h3>
            </div>

        </div>

    </div>
</div>

<style>

    path.link {
      fill: none;
      stroke: #f20000;
      stroke-width: 3px;
    }

    .node circle {
      cursor: pointer;
      fill: #fff;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    .node text {
      font-size: 11px;
      font-family: Arial;
    }

</style>

<script type="text/javascript">


    $(document).ready(function () {

        $("#Layout_on_gian_do_gpon").css('width', $(window).width() - 5);
        $("#Layout_on_gian_do_gpon").height($(window).height() - 100);
        $('#LoadGianDoGPOn').height($(window).height() - 180);
        $('#LoadGianDoGPOn').width($("#pannel_list_ont_gian_do_gpon").width() - 315);

        $("#donvi_find_gian_do_ontgpon").combotree({
            url: _nameSubDomain + "/Donvi_ToQL/Get_DonVi_To_OnJson_NotFindType_AndSetParent",
            idField: "id",
            treeField: "text",
            onSelect: function (row) {


                $("#TreeGird_dau_noi_tb_gian_do_ont_gpon").treegrid('load', { toql: row.id, donviql: row.Idparent });
                

            },
            onLoadSuccess: function (row) {
                // $("#list_don_vi_phan_quyen_thong_bao").combotree('setValue', 1);
            }
        });

        $("#TreeGird_dau_noi_tb_gian_do_ont_gpon").treegrid({

            url: _nameSubDomain + "/ONTGpon/listJsonIntoCateTree?toql=&donviql=",
            idField: "id",
            treeField: "vntpSite",
            lines: true,
            animate: true,
            collapsible: true,
            fitColumns: true,
            width: $("#pannel_list_cau_truc_dn_find_site").width() - 30,
            height: $(window).height() - 200,
            columns: [[
                { field: 'id', resizable: false, hidden: true },
                { field: 'vntpSite', resizable: false, title: 'Thiết bị', width: 110 }
            ]],
            //onContextMenu: onContextMenu_LOAISITE,
            onSelect: function (row) {

                $("#LoadGianDoGPOn").mask("Giản đồ đang được tải dữ liệu");

                setTimeout(function () {

                    $.ajax({ url: _nameSubDomain + "/ONTGpon/LoadViewGianDoGpon?DauNoid=" + row.ThietbiId, async: false }).done(function (data) {


                        $("#ContentGianDo").html("");

                        $("#ContentGianDo").html(data);

                    });


                }, 3000);

                setTimeout(function () {

                    $("#LoadGianDoGPOn").unmask();

                }, 5000);


            },
        });


    });


</script>